سفارش تبلیغ
صبا ویژن

پروژه AMP چیست و نحوه فعالسازی آن در وردپرس

پروژه AMP چیست و نحوه فعالسازی آن در وردپرس

وب همواره در حال توسعه است و صاحبان کسب و کار برای ماندن در بالا‌ترین نتایج می‌بایست از جدید‌ترین تغییرات گوگل پیروی کنند و اگر هم پیروی نکنند باعث می‌شود که از قافله عقب بمانند. سرویس گوگل AMP ، به عنوان یک ابتکار عمل برای لود سریع صفحات وب در تلفن‌های همراه درحال حاضر نزدیک به یک‌سال است که توسط توسعه دهندگان درحال توسعه است. از آنجایی که درحال حاضر این متد با ارزش، 6 ماهی است که با ثبات تر شده، بنابراین تصمیم گرفتیم که مقاله‌ای در این رابطه برایتان تهیه کنیم. در این مقاله با هم به نحوه فعالسازی AMP در وردپرس و همچنین مزایا و معایب AMP می‌پردازیم.

سرفصل‌های پست

  • 1 AMP چیست
    • 1.1 مزایای گوگل AMP
    • 1.2 معایب گوگل AMP
  • 2 تاثیر AMP در رتبه سئو سایت گوگل
  • 3 نحوه فعالسازی AMP در وردپرس
    • 3.1 افزونه‌های مخصوص گوگل AMP برای وردپرس :
  • 4 آموزش تنظیمات افزونه AMP For WP
    • 4.1 بخش General
    • 4.2 بخش Page Builder
    • 4.3 بخش Design
    • 4.4 بخش Single
    • 4.5 بخش Advertisient
    • 4.6 بخش AMP Menu
    • 4.7 بخش Social
    • 4.8 بخش SEO
    • 4.9 بخش Contact Form
    • 4.10 بخش Notifications
    • 4.11 بخش Comments
    • 4.12 بخش Advanced Settings
    • 4.13 بخش Extensions
  • 5 افزونه AMP مخصوص ووکامرس
  • 6 سئو گوگل AMP
  • 7 نحوه پیدا کردن و رفع ارور AMP
    • 7.1 خطای Not a valid AMP page در AMP
    • 7.2 مانیتورینگ گوگل AMP با New Relic
    • 7.3 فعالسازی AMP برای فایل‌های خارجی با کلودفلر
  • 8 در پایان

AMP چیست؟

AMP چیست سوالی هست که این روزها دوستان می‌پرسند، AMP مخفف عبارت Accelerated Mobile Pages یعنی لود سریع صفحات در تلفن همراه است گوگل پروژه AMP را در اکتبر سال 2015 رونمایی شد. پروژه متکی بر HTML AMP می‌باشد که یک چارچوب باز جدید بر‌مبنای فناوری‌های موجود در وب می‌باشد که حجم وب سایت‌ها هنگام لود شدن در توسط تلفن‌های هوشمند کاهش یابد. به طور خیلی خلاصه، باعث کاهش حجم صفحات طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما در تلفن‌های همراه می‌شود.

David Besbris رهبر پروژه AMP گوگل می‌گوید:

From day one, a key focus for AMP has been speed.  It is arguably one of the most frustrating things about the mobile web — borne out by recent Google research that shows that 53% of people will leave a site that fails to load in three seconds or less. That’s the worst of all worlds for users, businesses, publishers, websites and the mobile web as a whole. — David Besbris, AMP project lead at Google

از روز اول، هدف ما از توسعه AMP افزایش سرعت سایت بوده است. مسلما یکی از بدترین چیز‌ها در موبایل سرعت پایین وب سایت ها می‌باشد – با توجه به تحقیق گوگل 57 درصد کاربران اگر وب سایتی زیر 3 ثانیه لود نشود، آن وب سایت را ترک می‌کنند. سرعت پایین در وب سایت‌ها هنگام لود در تلفن‌های هوشمند مشکلی جهانی برای تمامی کاربران، کسب و کار‌ها، ناشران و وب سایت‌ها درست کرده است.

با توجه به آخرین بررسی Akamai، مشخص می‌شود که هر دهم ثانیه هم مهم است. برای مثال اگر یک دهم ثانیه وب سایتی دیرتر لود شود برای مثال از 2.7 ثانیه به 2.8 ثانیه برسد، باعث می‌شود که نرخ تبدیل وب سایت 2.4 درصد کاهش یابد. (در وب سایت‌های بزرگ این رقم فاجعه است)

amp 1 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

بسیاری از شرکت‌های بزرگ درطول این چند وقت از پروژه AMP گوگل حمایت کردند. از این شرکت‌ها می‌توانیم به اتوماتیک (توسعه دهنده وردپرس)، Reddit ، eBay ، Pinterest ، Washington Post ، Wired ، Gizmodo و غیره اشاره کرد. با توجه به گفته گوگل، فعالسازی این متد در ساخت سایت باعث می‌شود که 44 درصد بازدید‌کنندگان منحصر به فرد ماهیانه و 71 درصد بازدید‌های بازدیدکنندگان منحصر به فرد ماهیانه وب سایت شما افزایش یابد.

هنگامی که شما در وب سایت خود AMP را فعال می‌کنید، به صورت خودکار گوگل در کنار وب سایت شما نماد AMP  را نمایش می‌دهد که به معنای فعال بودن AMP در وب سایت می‌باشد، این را هم توجه کنید که برای تست باید از یک دستگاه تلفن همراه استفاده کنید. البته شما می‌توانید از شبیه‌ساز‌های ابزار توسعه دهنده گوگل کروم نیز استفاده کنید.

نشانه‌گذاری‌های ساختاری گوگل در نتایج جستجو باعث می‌شود که وب سایت شما برجسته تر نمایش یابد. برای مثال اسلاید‌های مقالات در نتایج جستجو بسیار زیبایی بخش می‌باشد.

amp 2 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

برای مثال در تصویر بالا یک نوع صفحه بندی AMP را مشاهده می‌کنید که علاوه بر سادگی و زیبا‌سازی صفحه جستجو به کاربر تضمین می‌کند که صفحه وارد شده به سرعت بارگیری خواهد شد.

amp 3 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

مانند تمامی پلتفرم‌های جدید برای فعال سازی AMP نیز شما باید مزایا و معایب آن را نسبت به کسب و کار خود بسنجید و نسبت به آن تصمیم بگیرید که آیا فعالسازی AMP برای کسب و کار شما مفید است یا مضر.

مزایای گوگل AMP

  • پروژه AMP گوگل کاملا رایگان و متن باز است.
  • پروژه AMP گوگل می‌تواند سرعت لود وب سایت شما در تلفن‌های همراه را افزایش دهد و توجه داشته باشید که سرعت لود یکی از فاکتور‌های رتبه بندی وب سایت می‌باشد. توضیحات بیشتر درباره این موضوع را می‌توانید در مقاله gtmetrix چیست بخوانید.
  • قرار گیری بهتر در SERP ها (نتایج صفحات موتور‌های جستجو ، Search engine results page) با فعال‌سازی اسلاید مقالات برای افزایش نرخ کلیک. پس از فعال سازی AMP در یکی از وب سایت‌های معروف ، AMP باعث افزایش200 درصدی نرخ کلیک یک وب سایت شده است که نتیجه این رشد باعث افزایش بازدید سایت هم نیز می‌شود.
  • پروژه AMP گوگل به عملکرد وب سایت بسیار کمک می‌کند، برای مثال نیازی به لود شدن فریم‌ورک‌های حجیم CSS وJS ندارد.
  • می‌تواند باعث افزایش نرخ تبدیل وب سایت شما شود.
  • با‌ توجه به پیشرفت هر روزه AMP ، به تازگی امکان اضافه کردن تبلیغات نیز به آن اضافه شده است که با‌توجه به آن می‌توانید از طریق Adsense برای خود در‌آمد داشته باشید.
  • به صورت خودکار تصاویر را فشرده سازی می‌کند. (تصاویر برای نمایش به فرمت WebP تبدیل می‌شوند)
  • AMP Lite باعث افزایش سرعت در اتصالات ضعیف می‌شود. گوگل می‌گوید که این تکنیک تا 45 درصد وب سایت را نسبت به قبل فشرده تر می‌کند.

معایب گوگل AMP

  • به طور کلی گوگل AMP از فاکتور‌های رتبه بندی وب سایت نیست ولی ممکن است که در آینده جزو این فاکتور‌ها باشد. با توجه به این موضوع از نظر تاثیر گذاری روی رتبه وب سایت هم جز‌و مزایا و هم جزو معایب به حساب می‌آید.
  • اگر شما یک توسعه دهنده وب نباشید فعالسازی AMP در وب سایتتان کمی سخت است ولی خوشبختانه با تشکر از وردپرس این کار کمی آسان تر شده است و آن‌هایی که توسعه دهنده وب نیستند نیز با فعالسازی افزونه‌ها می‌توانند از امکانات AMP استفاده کنند. در ادامه به نحوه فعالسازی AMP در وردپرس نیز می‌پردازیم.
  • ممکن است که به نرخ تبدیل شما آسیب بزند یا نتیجه‌ای منفی برایتان به وجود آورد.
  • ممکن است که شما را نگران کند که پس از بهینه سازی چه بر سر وب سایتتان می‌آید؟
  • گزارشات مشکلات برای مثال صفحات 404 در گوگل آنالیز نیز ثبت می‌شود.
  • بعضی‌ها در میزان مشارکت و میزان نرخ دفع کاربری (Bounce rate) دچار مشکل شدند.
  • از اسکریپت‌های ثالث و برنامه‌هایی استفاده می‌کنند که شاید هنوز توسط بعضی از مرورگر‌ها پشتیبانی نشوند.
  • در بعضی از مرورگر‌های قدیمی مانند Internet Explorer 11 پشتیبانی نمی‌شود. گوگل گفته است که در 2 ورژن آخر بیشتر مرورگر‌های معروف مانند گوگل کروم، مازیلا فایرفاکس، اوپرا، اج و سافاری AMP پشتیبانی می‌شود.

تاثیر AMP در رتبه سایت گوگل

در فوریه 2017 ، گوگل پروژه AMP شروع به انتشار لینک مستقیم ناشران کرد که تا قبل از آن صفحات به صورت کش شده در گوگل بارگیری می‌شدند که برای سئو وب سایت کارآمد ولی برای رتبه بندی در وب سایت‌های رتبه‌بندی مانند Alexa مضر بود. همچنین برای شرکت‌ها برندینگ را با مشکل مواجه می‌کرد. خوشبختانه گوگل این را درک کرده و راه حلی برای آن ایجاد کرده است. در حال حاضر، وب سایت‌هایی که از AMP استفاده می‌کنند هنوز هم از لینک‌های گوگل برای نمایش محتویات وب سایت استفاده می‌کنند ولی در بالای صفحه AMP یک قسمت برای لینک وب سایت وجود دارد که هم به رتبه بندی کمک می‌کند و هم با کلیک بر روی آن وب سایت لود می‌شود. با‌ این حال، این کار گوگل روش عالی‌ برای افزایش رتبه وب سایتنیست ولی از هیچی بهتر است.

amp 4 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

این هم یک نمونه از مشکلاتی که AMP در برندینگ ایجاد می‌کند.

amp 5 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

حتی اگر وب سایت شما از نسخه موبایل هم پشتیبانی نکند و تنها AMP را برای تلفن همراه پشتیبانی کند نیز گوگل لینک صفحه مخصوص دسکتاپ را نمایش می‌دهد و به صورت مستقیم لینک می‌کند. حتی اگر در جستجو‌های گوگل اولین وب سایت باشید.

amp 6 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

نحوه فعالسازی AMP در وردپرس

خوشبختانه، در حال حاضر فعالسازی AMP در وردپرس خیلی راحت تر از 6 ماه گذشته است. پیشرفت‌های بسیار‌ زیادی در وردپرس ایجاد شده است و پلتفرم AMP به طور کامل تغییر کرده است. با این حال، برای نمایش وب سایتتان به عنوان یک وب سایت پشتیبانی کننده از AMP کد‌هایتان باید توسط گوگل تایید شود. یک افزونه پست‌های شما را به AMP تبدیل می‌کند ولی این گوگل است که تصمیم می‌گیرد که مقالات شما را به صورت AMP نشان دهد یا خیر.

به شکل خیلی ساده برای تبدیل یک مقاله به AMP وردپرس یک ساختار AMP به مقالات شما اضافه می‌کند و برای دستیابی به این ساختار باید از /amp یا /?amp استفاده کنید. به عنوان مثال :

مقاله اصلی : https://domain.com/blog-post

مقاله AMP گوگل :  https://domain.com/blog-post/amp

افزونه‌های مخصوص گوگل AMP برای وردپرس :

درحال حاضر دو افزونه معروف برای فعالسازی AMP در مخزن وردپرس وجود دارد که یکی از آنها افزونه رایگان و رسمی AMPساخته اتوماتیک سازنده وردپرس می‌باشد.

amp 7 1024x329 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

در‌حال حاضر که این مقاله را درحال نوشتن هستم این افزونه بیشتر از 200 هزار نصب فعال می‌باشد و امتیاز 3.5 از 5 را دریافت کرده است. شما می‌توانید این افزونه را از مخزن وردپرس و همچنین بخش افزودن افزونه در پیشخوان وردپرس دانلود و فعالسازی کنید. شما می‌توانید با این اپلیکیشن صفحه AMP خود را شخصی‌سازی کنید ولی این را بدانید که این شخصی‌سازی‌ها محدود است و شما برای اضافه کردن تبلیغات و دیگر امکانات باید اطلاعات کافی در رابطه با کد‌نویسی داشته باشید.

amp 8 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسپروژه-AMP

قابل توجه است که این افزونه تنها مقالات شما را پشتیبانی می‌کند و صفحات را پشتیبانی نمی‌کند. اگرچه شرکت اتوماتیک گفته است که درحال اضافه کردن امکان پشتیبانی از صفحات نیز می‌باشد.

اگر شما تصمیم دارید که امکانات اضافی را به صفحه AMP وب سایت خود اضافه کنید، اینجاست که افزونه رایگان AMP For WP پا به میدان رقابت می‌گذارد. این افزونه اساسا پیشرفته‌تر از افزونه AMP است و امکانات بیشتر را پشتیبانی می‌کند. این افزونه توسط دو توسعه دهنده هندی وردپرس احمد کالودی و محمد کالودی ساخته شده است.

amp 10 1024x331 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

الان که در حال نوشتن این مقاله هستم، این افزونه بیشتر از 80 هزار بار نصب شده و امتیاز 4.6 را از 5 دریافت کرده است. شما می‌توانید این افزونه را از مخزن وردپرس و همچنین بخش افزودن افزونه در پیشخوان وردپرس دانلود و فعالسازی کنید. این افزونه به شما اجازه می‌دهد تا بسیاری از اطلاعات درون صفحه AMP وب سایت خود را شخصی‌سازی کنید. در زیر ما به نحوه شخصی سازی AMP می‌پردازیم. توجه داشته باشید افزونه AMP for WP با پیش‌‌نیاز نصب بودن افزونه AMP که در بالا معرفی کردیم کار می‌کند.

amp 11 1024x857 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

آموزش تنظیمات افزونه AMP For WP

بخش General

در صفحه General شما می‌توانید لوگو خود را اضافه کنید، سایز لوگو را تغییر دهید و AMP را برای صفحات نیز فعال کنید. بسته به نوع وب سایت و مصرف ترافیک شاید شما بخواهید فقط AMP بر روی وبلاگ شما فعال باشد (مقالات).

amp 12 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

Homepage

در بخش Homepage شما می‌توانید AMP را برای صفحه اصلی وب سایتتان فعال/غیرفعال کنید. می‌توانید سایز تصاویر درون صفحه اصلی را کنترل کنید و با فعال کردن گزینه Non-AMP Home page link…. می‌توانید در هدر و لوگو لینکی ایجاد کنید که وقتی کاربر آنها را لمس کرد از صفحه اصلی AMP به صفحه اصلی پیش‌فرض (غیر AMP) متصل شود.

amp 13 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Page Builder

در این قسمت شما با فعال‌ کردن گزینه می‌توانید در صفحه خود از ابزارک‌های وردپرس استفاده کنید.

amp 14 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Design

در بخش Design ، شما می‌توانید برای صفحه AMP خود از طریق Post Builder یک پوسته شخصی بسازید یا از طریق Design selector یک پوسته آماده انتخاب کنید.

شما می‌توانید جستجو را در صفحه اضافه کنید که برای فعالسازی آن باید گواهینامه HTTPS داشته باشید و همچنین کلید Call Now را به صفحه اضافه کنید. همچنین می‌توانید از طریق Custom CSS تغییرات در CSS ایجاد کنید.

 

 

amp 15 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

 

بخش Single

در بخش Single نیز می‌توانید آیکون‌‌های شبکه اجتماعی ، لینک‌ها را غیر فعال کنید، لینک مقاله بعدی/قبلی را اضافه کنید، زمان نوشته شدن مقاله را اضافه کنید و تغییراتی در مقالات محبوب ایجاد کنید.

amp 16 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Advertisient

در این بخش شما می‌توانید تبلیغات AdSense  را به وب سایتتان اضافه کنید و از آن درآمد کسب کنید. این تبلیغات می‌تواند در چندین مکان مختلف قرار گیرد. گوگل از وب سایت‌هایی که از تبلیغات AdSense استفاده می‌کنند قدردانی می‌کند. (AdSense  سرویس تبلیغاتی گوگل است و گوگل از طریق نمایش تبلیغات درآمد کسب می‌کند)

amp 17 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش AMP Menu

در این بخش شما می‌توانید کاری کنید که کاربران برای ورود به هر بخش از منو نیز از AMP استفاده کنند و سرعت بالا را همانطور که هست احساس کنند.

amp 18 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Social

در این بخش شما می‌توانید شبکه‌های اجتماعی را برای خودتان فعال کنید. برای فیس‌بوک شما نیازمند APP ID هستید که باید در فیس‌بوک بسازید.

amp 19 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش SEO

بخش سئو این افزونه یکی از مهمترین بخش‌ها است، زیرا گوگل از این طریق می‌تواند تشخصی دهد که شما از AMP استفاده می‌کنید و تصمیم بگیرد که از AMP شما استفاده کند یا خیر. ما پیشنهاد می‌کنیم که برای برندینگ از Meta Description استفاده کنید. همچنین اگر از افزونه Yoast برای سئو استفاده می‌کنید بهتر است که از Meta Tags from Yoast و Yoast Description in ld+jason استفاده کنید.

amp 20 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Analytics

در این بخش شما می‌توانید نوع آنالیز وب سایت خود را انتخاب کنید و همچنین از گوگل Tag Manager استفاده کنید.

amp 21 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

این بخش از آنالیزور های زیر پشتیبانی می‌کند :

  • Google Analytics
  • Segment Analytics
  • Piwik Analytics
  • Quantcast Measurient
  • comScore
  • StatCounter
  • Effective Measure
  • HitStats Analytics
  • Yandex Metrika
  • Chartbeat Analytics

بخش Structured Data

بخش The structured data به شما اجازه می‌دهد که در صفحه The structured data لوگو و سایز تصاویر شخصی سازی شده داشته باشید.

amp 22 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Contact Form

یک فرم تماس با افزونه Contact form 7 می‌توانید اینجا اضافه کنید.

amp 23 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Notifications

شما می‌توانید با فعالسازی این بخش هنگامی که کاربران وارد وب سایت AMP شما می‌شوند با پیغامی مواجه شوند که باید آن را بپذیرند.

amp 24 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp

بخش Comments

در این بخش شما تعداد نظراتی که در یک صفحه AMP می‌توانید استفاده کنید را شخصی سازی می‌کنید و می‌توانید از افزونه‌های Disqus و Facebook Comments نیز برای نظر‌دهی استفاده کنید.

amp 25 - پروژه AMP چیست و نحوه فعالسازی آن در وردپرسamp